<template>
    <div class="navbar_wrap">
        <img class="navbar-logo" src="../assets/images/navbar/icon_logo.png" alt="">
        <span class="navbar-text is_hover" @click="$router.push({path: '/'})">杭州氢能工程管理系统</span>

        <div class="float-right">
            <img class="icon-msg is_hover" src="../assets/images/navbar/icon_msg.png" alt="" @click="viewMsg()"/>
            <img class="img-avatar" src="../assets/images/navbar/img_avatar.png" alt="">
            <el-dropdown>
                <span class="el-dropdown-link">
                  自言自君<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item>退出登陆</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <el-dialog
                title="告警信息"
                :visible.sync="dialogVisible"
                :close-on-click-modal="false"
                custom-class="hy-dialog">
            <div class="dialog-content">
                <vue-scroll :ops="$root.scrollOpsY">
                    <div class="item-box" v-for="item in alertList">
                        <div :class="`item-type ${ ['', 'is_yellow', 'is_red'][ item.type ] }`">{{ typeList[ item.type ] }}</div>
                        <div class="item-info">
                            <div class="item-info-name">设备名称：{{ item.name }}</div>
                            <div class="item-info-details">详细内容：{{ item.details }}</div>
                        </div>
                        <div class="item-time">{{ item.time }}</div>
                    </div>
                </vue-scroll>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                alertList: [
                    {
                        type: 1,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 2,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 0,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 0,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 0,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 0,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 0,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                    {
                        type: 0,
                        name: '某某某某某某某某某设备',
                        details: '某某某某某某某某某',
                        time: '2021-10-23 12:39',
                    },
                ],
                typeList: ['操作事项','告警','故障',],
            }
        },
        methods: {
            viewMsg() {
                this.dialogVisible = true;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .navbar_wrap {
        width: 100%;
        height: 100%;
        background-image: url("../assets/images/navbar/bg_navbar.png");
        background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
        line-height: 60px;
        padding: 0 20px;
        box-sizing: border-box;

        > .navbar-logo {
            vertical-align: middle;
            height: 22px;
            margin-right: 4px;
        }

        > .navbar-text {
            display: inline-block;
            vertical-align: middle;
            font-size: 20px;
            color: #FFFFFF;
            font-weight: 600;
            position: relative;
            top: -1px;
        }

        > .float-right {

            > .icon-msg {
                height: 24px;
                margin-right: 46px;
                vertical-align: middle;
            }

            > .img-avatar {
                height: 24px;
                vertical-align: middle;
                margin-right: 4px;
            }

            >.el-dropdown {
                position: relative;
                top: 2.5px;

                .el-dropdown-link {
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.8);

                    .el-icon-arrow-down {
                        font-size: 14px;
                        position: relative;
                        top: -0.5px;
                        left: -1px;
                    }
                }
            }
        }

        >.el-dialog__wrapper {

            >.hy-dialog {
                height: 680px;

                >.el-dialog__body {
                    width: 100%;
                    height: calc( 100% - 113px );
                    padding-left: 140px;
                    padding-right: 52px;
                    padding-bottom: 70px;

                    >.dialog-content {
                        width: 100%;
                        height: 100%;

                        .item-box {
                            width: 100%;
                            margin-bottom: 30px;
                            position: relative;
                            padding-right: 80px;
                            box-sizing: border-box;

                            >.item-type {
                                display: inline-block;
                                vertical-align: top;
                                width: 86px;
                                height: 36px;
                                line-height: 36px;
                                border-radius: 4px;
                                font-size: 18px;
                                color: #FFFFFF;
                                text-align: center;
                                background: #35C759;

                                &.is_yellow {
                                    background: #FF9500;
                                }

                                &.is_red {
                                    background: #FF3B30;
                                }
                            }

                            >.item-info {
                                width: calc(  100% - 86px );
                                display: inline-block;
                                vertical-align: top;
                                line-height: 25px;
                                padding-left: 20px;
                                box-sizing: border-box;

                                .item-info-name {
                                    font-size: 18px;
                                    font-weight: 600;
                                    color: #232323;
                                    margin-bottom: 7px;
                                }

                                .item-info-details {
                                    font-size: 18px;
                                    color: #535763;
                                }
                            }

                            >.item-time {
                                position: absolute;
                                top: 0px;
                                right: 80px;
                                font-size: 18px;
                                color: #535763;
                                line-height: 25px;
                            }
                        }
                    }
                }
            }

        }
    }
</style>
